<template>
    <el-input v-model="name" placeholder="请输入角色名称" />
    <el-button @click="onSearch">查询搜索</el-button>
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="name" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="sort" label="用户数" />
        <el-table-column label="添加时间">
            <template #default="scope">
                <div>{{ scope.row.createTime ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") : "/" }}</div>
            </template>
        </el-table-column>
        <el-table-column label="是否启用">
            <template #default="scope">
                <el-switch :value="scope.row.status === 1 ? true : false" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="text" @click="hdAllocResource">分配资源</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
        :page-sizes="[1, 5, 10, 20]" layout="total,sizes, prev, pager, next,jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
  
<script lang="ts" setup>
import * as api from "@/request/api";
import dayjs from 'dayjs' // ES 2015
import useTable from "@/hooks/useTable"
import { ref } from "vue"
import router from "@/router";

let name = ref("")
let { tableData, pagination, handleSizeChange, handleCurrentChange, getTableData } = useTable(api.admin.getRoleList, { keyword: name })
// 搜索
let onSearch = () => {
    // getTableData()
    console.log("onSearch");
    getTableData()
}
let hdAllocResource = () => {
    router.push("allocResource")
}

</script>
  